﻿@model FloodFree.Common.Sensor

    <script type="text/javascript">

    $(function () {

        var d1 = [];

        @foreach (var item in Model.Updates) {
            <text>
            d1.push([@item.Id, @item.Status]);
            </text>
        }
        
        
        $.plot("#placeholder", [d1]);
    });

	</script>


@{
    ViewBag.Title = "Sensors";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutAdmin.cshtml";
}

<h2>@Resources.Resource.AdminMenuSensors</h2>

<p>
    @Html.ActionLink(@Resources.Resource.AdminAddSensor, "Create")
</p>

<form class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="focusedInput">Id</label>
            <div class="controls">
                @Html.DisplayFor(model => model.SensorId)
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="focusedInput">UUID</label>
            <div class="controls">
                @Html.DisplayFor(model => model.SensorUUID)
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="focusedInput">Address</label>
            <div class="controls">
               @Html.DisplayFor(model => model.Address)
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="focusedInput">Latitude</label>
            <div class="controls">
               @Html.DisplayFor(model => model.Latitude)
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="focusedInput">Longitude</label>
            <div class="controls">
               @Html.DisplayFor(model => model.Longitude)
            </div>
        </div>
    
    </fieldset>
</form>


<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#graph">@Resources.Resource.Chart</a></li>
  <li><a href="#updates">@Resources.Resource.Updates</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="graph">
    <div id="placeholder" class="demo-placeholder"></div>
  </div>
  <div class="tab-pane" id="updates">
        <table class="table table-bordered">
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Date
                </th>
                <th>
                    Status
                </th>
                <th>
                    StatusType
                </th>
                <th></th>
            </tr>


            <p>
                <b>@Resources.Resource.Updates</b>
            </p>

            @foreach (var item in Model.Updates) {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Date)
                    </td>
                    <td>
                        @item.StatusDescription()
                    </td>
                    <td>
                        @item.StatusTypeDescription()
                    </td>
                    <td>
            
                    </td>
                </tr>
            }

        </table></div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>

    $(document).ready(function () {
        $(function () {
            $('#myTab a:first').tab('show');
        })

        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })
    });
    
</script>
